//LiuZh 2017-05-17
import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    Modal,
    TouchableHighlight
} from 'react-native';

const backImgSrc = require('../../img/back_white.png');
const winWidth = Dimensions.get("window").width;

export default class Toolbar extends Component {
    constructor(props) {
        super(props);
    }

    pressBack = () => {
        this.props.navigation.goBack();
    }

    pressVideo = () => {
        this.props.navigation.navigate('Video');
    }

    render() {
        const bgColor = this.props.backgroundColor;
        return (
            <View style={[styles.box, bgColor ? {backgroundColor: bgColor, borderColor: bgColor} : {}]}>
                {this.props.needBack ?
                    <TouchableOpacity
                        onPress={this.props.goBack ? this.props.goBack : this.pressBack}
                        style={{
                            height: 50,
                            width: 50,
                            flexDirection: "row",
                            justifyContent: 'flex-start',
                            alignItems: 'center',
                            position: 'absolute',
                            left: 0,
                            top: 0
                        }}>
                        <Image style={styles.back}
                               resizeMode={'contain'}
                               source={backImgSrc}/>
                    </TouchableOpacity> :
                    <View/>}
                <View style={{flexDirection: "row", justifyContent: "center"}}>
                    <Text
                        style={[styles.text, this.props.textColor ? {color: this.props.textColor} : {}]}>{this.props.text}</Text>

                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    box: {
        height: 50,
        marginTop: 0,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 0.5,
        borderColor: '#DDDDDD',
        backgroundColor: '#38373d',
    },
    back: {
        height: 20,
        width: 20,

    },
    text: {
        alignSelf: "center",
        color: '#ffffff'
    }
});